//saveData 保存数据
function saveData(id, num, ter) {
    //存什么信息 id => num
    //数据结构{id:num}
    //具体存储到哪里可以让其他页面访问到呢？ 用localStorage
    //如果原来买过，就在原来的基础上操作
    if (localStorage.getItem('cDatas')) {
        var cartDatas = JSON.parse(localStorage.getItem('cDatas'))
    } else {
        var cartDatas = {}
    }
    //给对象添加键值对
    //如果购物车里面没有买某种商品，直接赋值为num
    //如果买过，+=num
    if (cartDatas[id] == undefined || ter) {
        cartDatas[id] = num;
    } else {
        cartDatas[id] += num;
    }
    localStorage.setItem('cDatas', JSON.stringify(cartDatas))
}
//基于axios对get请求的封装
function AG(url, params) {
    return axios({
        baseURL: 'http://localhost:8888',
        url,
        params,
    })
}
//基于axios的post请求的封装
function AP(url, data) {
    return axios({
        baseURL: 'http://localhost:8888',
        method: 'post',
        url,
        data,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

    })
}
//获取页面主体
var cartBox = document.getElementById("cartBox")
//获取本地存储中存着的商品id和数量
var cDatas = JSON.parse(localStorage.getItem('cDatas'));
// 初始化一个空数组来存储匹配的对象
var matchedProducts = [];

//渲染页面函数
function render(callback){
    let html = `<ul id='ul'>`
    for (let pid in cDatas) {
        AG('goods/item', { id: pid }).then(resData => {

            html+=`
            <li class='list' data-id=${resData.data.info.goods_id}>
                <input type='checkbox' class='ck'>
                <img src='${resData.data.info.img_big_logo}'>
                <span class='pname'>${resData.data.info.title}</span>
                <span class='perPrice'>${resData.data.info.price}元</span>
                <span class='minus'>-</span>
                <input type='text' class ='num' value='${cDatas[pid]}'>
                <span class='plus'>+</span>
                <span class='perTotalPrice'>${cDatas[pid] * resData.data.info.price}元</span>
                <span class='del'>删除</span>
            </li>`
            //回调函数
            callback(html)
        })   
    }
}
//执行渲染页面函数
render(function(data){
    data += '</ul>'
    cartBox.innerHTML = `
    <header><input type="checkbox" id="checkAll"><span>全选</span>
    <span>商品</span>
    <span>单价</span>
    <span>数量</span>
    <span>小计</span>
    <span>操作</span>
    </header>
    ${data}
    <div class='total'>总价:<span id ="totalPrice">0</span><span>元</span></div>
    `;
    cartOpt()
})
function cartOpt() {
    var checkAll = document.getElementById("checkAll")//全选
    var lists = document.querySelectorAll(".list")//li
    var aCks = document.querySelectorAll(".ck")//所有的单个复选框
    var minus = document.querySelectorAll(".minus")//减号
    var ul=document.querySelector('#ul')
    var aLists = ul.children
    var nums = document.querySelectorAll(".num")//数量
    var plus = document.querySelectorAll(".plus")//加号
    var perPrices = document.querySelectorAll('.perPrice')//单价
    var perTotalPrice = document.querySelectorAll('.perTotalPrice')//单个商品的总价
    var dels = document.querySelectorAll('.del')//删除键
    var toTalPrice = document.getElementById('totalPrice')//总价
    var total=document.querySelector('.total')
    
    //1. 单击全选时，所有单个复选框的状态和全选按钮状态保持一致
    checkAll.onclick = function () {
        aCks.forEach((ck) => {
            ck.checked = checkAll.checked
        })
        updateData()
        comTotalPrice()
    }
    aCks.forEach(function (ck) {
        ck.onclick = function () {
            var len1 = document.querySelectorAll('.ck:checked').length
            var len2 = aCks.length
            console.log(len1, len2);
            if (len1 == len2) {
                checkAll.checked = true
            } else {
                checkAll.checked = false
            }
            comTotalPrice();
        }
    })
    for (let i = 0; i < lists.length; i++) {
        //减
        minus[i].onclick = function () {
            nums[i].value--
            if (nums[i].value < 1) {
                nums[i].value = 1
            }
            updateData()
            comTotalPrice()
        }
        //加
        plus[i].onclick = function () {
            nums[i].value++
            updateData()
            comTotalPrice()
        }
        //改数量
        nums[i].onblur = function () {
            if(nums[i].value<1){
                nums[i].value=1
            }
            updateData()
            comTotalPrice()
        }
        dels[i].onclick = function () {
            lists[i].remove()
            aCks[i].checked=false
            var pid=lists[i].dataset["id"]
            var cartDatas = JSON.parse(localStorage.getItem('cDatas'))
            //   delete cartDatas.pid试图删除对象cartDatas中名为pid的属性。然而，在这段代码中，pid是一个变量，其值是
            //从DOM元素的dataset属性获取的数据项ID。
            //   由于JavaScript引擎在这里不会将pid变量的值作为属性名来解析，所以delete cartDatas.pid实际上尝试删除的
            //是名为“pid”（字符串）的属性，而不是变量pid所代表的值对应的属性。
            //   如果要根据变量pid的值删除属性，应该使用方括号记法，如：delete cartDatas[pid]。这样，JavaScript会把
            //pid变量的当前值用作属性名来查找并删除相应的属性。
            delete cartDatas[pid]
            localStorage.setItem('cDatas', JSON.stringify(cartDatas))
            comTotalPrice()
            
        }

        //更新数据
        function updateData() {
            comTotalPrice()
            var pid = lists[i].dataset["id"];
            var num = Number(nums[i].value)
            perTotalPrice[i].innerHTML = parseInt(perPrices[i].innerText) * num+"元"

            saveData(pid, num, true)
        }
        //计算总价
        function comTotalPrice() {
            var count = 0;
            aCks.forEach(function (e, i) {
              if (e.checked) {
                count += parseInt(perTotalPrice[i].innerText);
                console.log(count);
              }
            });
            toTalPrice.innerText = count;
            if(aLists.length==0){
                checkAll.disabled='true'
            }else{
                checkAll.type='checkbox'
            }
        }
    }
}